<template>
  <div class="particulars_container">
    <div class="particulars">
      <div class="particulars_news">
        <div class="particulars_debate">
          <div class="particulars_debates">
            <div class="particulars_announce">
              <div class="particulars_myinfo">
                <img :src="discussInfo.userAvatar" />
              <h4 class="particulars_title">{{ discussInfo.discussTitle }}</h4>
              </div>
            </div>
            <div class="particulars_author">
              <div class="particulars_peoson">{{ discussInfo.belongUsername }}</div>
              <!-- 这里 formatDate会传前面那个参数到方法里 -->
              <p class="particulars_time">
                发起于 {{ discussInfo.createTime | formatDate }}
              </p>
                            <div class="particulars_single">{{ discussInfo.discussTag }}</div>
            </div>
            <p class="particulars_text">
              {{ discussInfo.discussContext }}
            </p>
            <div class="particulars_ways">
               <el-button
                  class="particulars_funtioned icons_topics"
                  type="text"
                  size="mini"
                  @click="handleLike()"
                  ><i class="el-icon-thumb icon-la" />10</el-button
                >
             <el-button
                  class="particulars_funtioned icons_topics"
                  style="font-size: 18px"
                  type="text"
                  @click="handleCollect()"
                  size="mini"
                  ><i class="el-icon-star-on" />50</el-button
                >
            </div>
            <div class="particulars_observer"> 

              <div class="particulars_people_comment">
        <div class="particulars_photo">
          <img :src="userInfo.avatar" />
          <span>{{userInfo.username}}</span>
          <span class="particulars_times">{{userInfo.createTime | formatDate}}</span>
        </div>
        <div class="particulars_details">内容</div>
        <div class="particulars_detail">
           <el-button
                  class="particulars_signs"
                  type="text"
                  size="mini"
                  @click="handleLike()"
                  ><i class="el-icon-thumb icon-la" />10</el-button
                >
                <el-button
                  class="particulars_signs"
                  type="text"
                  size="mini"
                  @click="handleComment()"
                  ><i class="el-icon-chat-round" />20</el-button
                >
          <!-- <el-button class="particulars_signs"><p>点赞</p></el-button>
          <el-button  class="particulars_signs"><p>回复数量</p></el-button> -->
          <el-button  class="particulars_signs sign"><p>回复</p></el-button>
        </div>
      </div>


            </div>
          </div>
        </div>
      </div>
    </div>
      
   
    <div class="particulars_related">
      <div class="particulars_s">
        <span> 收藏次数 </span>
        <span>评论人数</span>
        <span>浏览次数</span>
        <hr />
        <p>相关标签：</p>
        <span class="particulars_function" style=" margin-top: 10px;">Java &nbsp; 暑假实习</span>
      </div>
      <div class="particulars_x">
        <p>相关讨论</p>
        <span><img src="" />排序算法</span>
        <span><img src="" />排序算法</span>
        <span><img src="" />排序算法</span>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";

const defaultDiscuss = {
  id: 1,
  discussTitle: "提问｜有关暑期实习的问题",
  discussTag: "暑假实习",
  discussContext:
    "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？3.实习时主要工资是多少，虽然实习不是很在意钱，但没达到平均总感觉心里超不爽的，暑期实习的平均工资是多少。4.暑期实习的项目经历，这个项目要做到什么地步才算好？要把springcloud那些注册中心，熔断降流什么的都用到吗，这些只是过了一遍，还没有实操经验，之前做的两个项目到前后端结合后速度明显变慢了，然后前端报错就做不下去了。5.中间件部分要求掌握到什么地步？我也只是过了一遍，跟着视频走也能做出来，到自己动手就无能为力了。就是这些啦，希望有大佬可以解解惑。",
  discussStatus: 1,
  createTime: "2022-02-21 01:13:07",
  updateTime: "2022-02-21 01:13:07",
  belongUsername: "丫丫",
  userAvatar:  "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
};

const vueUserInfo = {
  id: 1,
  username: "丫丫", //账号
  nickname: "小丫丫", //别名
  password: "1234567890",
  avatar: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  email: "19880030153@qq.com",
  phone: "19880030153",
  sex: 0,
};
export default {
  name: "discuss",
  data() {
    return {
      //  textarea: "",
      // // 2、定义data的数据命名规则  列表就list结尾，详情页面就detail结尾 或者Info
      // discussDetail: Object.assign({},defaultDiscuss), //定义为一个对象
      userInfo: Object.assign({},vueUserInfo),
      discussInfo: Object.assign({}, defaultDiscuss),
    };
  },
  // 有一个过滤器（）
  filters: {
    // 格式化时间
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      //   这个就是格式化时间的方法（"yyyy-MM-dd"这个是格式可以是很多种（MM-dd）等等）
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  created() {
    this.getDiscuss();
   
  },
  methods: {
    getDiscuss() {
      this.userInfo = vueUserInfo;
      this.discussInfo = defaultDiscuss;
      console.log("discuss");
    },
    handleLike() {
      console.log("点赞");
    },
    handleComment() {
      console.log("评论数量");
    },
    handleCollect() {
      console.log("收藏");
    },
    // 点击搜索按钮
    // searchClick() {},
    handleAddDiscuss() {
      console.log("增加讨论");
    },
    handleHotList() {
      console.log("热列表");
    },
    handleNewList() {
      console.log("最新列表");
    },
  },
};
</script>

<style>
  @import "../../assets/css/discuss.css";
</style>